<template>
  <div class="content">
    <div class="content-child1">
      <el-row>
        <el-col :span="12">
         <span>设备型号:</span>
         <!-- :disabled="true" -->
          <el-input v-model="eEquipmentypeVO.equipmentId" size="small" placeholder="请输入内容" :style="{width:70+'%'}" ></el-input>
        </el-col>
        <el-col :span="12">
          <span>设备名称:</span>
          <el-input v-model="eEquipmentypeVO.equipmentName" size="small" placeholder="请输入内容" :style="{width:70+'%'}"></el-input>
        </el-col>
      </el-row>


      <el-row :style="{marginTop:20+'px'}">
        <el-col :span="24">
          <div style="display: flex;padding-left: 20px;">
            <span>描述：</span>
            <el-input v-model="eEquipmentypeVO.description" type="textarea" maxlength="30" show-word-limit placeholder="请输入内容" :style="{width:36.5+'%'}"></el-input>
          </div>
        </el-col>
      </el-row>


      <el-row :style="{marginTop:20+'px'}">
        <el-col :span="12">
         <span>模拟脚本:</span>
          <el-input v-model="eEquipmentypeVO.script" size="small" placeholder="请输入内容" :style="{width:70+'%'}"></el-input>
        </el-col>
        <el-col :span="12">
          <!-- 图片上传 -->
          <el-upload
           :action="BASE_API+'file/upload/img'"
           name="imgFile"
            :before-upload="beforeUpload"
           :on-success="handleSuccess"
           :show-file-list="false">
           <span style="margin-left: 30px;">图  片:</span>
           <el-button type="file" size="small" >游览</el-button>
          </el-upload>
        </el-col>
      </el-row>




      <!-- 传感器部分 -->
      <el-row :style="{marginTop:20+'px'}" :class="{'theClass':true}">
        <el-col :span="10" style="display: flex;align-items: center;">
         <span  style="margin-left: 15px;">传感器:</span>
         <el-link type="primary" :underline="false" @click="addSensorType(-1)"><i class="iconfont icon-jiahao" style="font-size: 25px;"></i></el-link>
        </el-col>
        <el-col :span="14">
          <span style="margin-left: 25px;">更新频率（S）:</span>
          <el-input v-model="eEquipmentypeVO.acquisitionFrequency" size="small" placeholder="请输入内容" :style="{width:30+'%'}"></el-input>
        </el-col>
      </el-row>


      <vxe-table
        border
        show-header-overflow
        show-overflow
        ref="sensorTable"
        highlight-hover-row
        :align="allAlign"
        :edit-config="{trigger: 'click', mode: 'row',icon: 'fa fa-pencil'}"
        :data="eSensorVOList">
        <vxe-table-column field="sensorTag" title="位号" :edit-render="{name: 'input'}"></vxe-table-column>
        <vxe-table-column field="sensorName" title="名称" :edit-render="{name: 'input'}"></vxe-table-column>
        <vxe-table-column field="sensorName" title="传感器类型" width="100" >
          <template v-slot="{ row }">
              <el-select v-model="row.sensorType" size="mini">
                <el-option
                  v-for="item in SensorListOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </template>
        </vxe-table-column>
        <vxe-table-column field="sensorUnit" title="单位" :edit-render="{name: 'input'}"></vxe-table-column>
        <vxe-table-column field="sensorMax" title="最大值" :edit-render="{name: 'input'}"></vxe-table-column>
        <vxe-table-column field="sensorMin" title="最小值" :edit-render="{name: 'input'}"></vxe-table-column>
        <vxe-table-column field="alarmThreshold" title="告警阈值" :edit-render="{name: 'input'}"></vxe-table-column>
        <vxe-table-column title="操作" width="100" show-overflow>
          <template v-slot="{ row }">
            <i class="el-icon-delete"  @click="sensormoveEvent(row)"></i>
          </template>
        </vxe-table-column>
      </vxe-table>



      <!-- 操作按钮部分-->

      <el-row :style="{marginTop:20+'px'}">
        <el-col :span="24" style="display: flex;align-items: center;" >
         <span  style="margin-left: 15px;">操作按钮:</span>
         <el-link type="primary" :underline="false" @click="addOperationType(-1)"><i class="iconfont icon-jiahao" style="font-size: 25px;"></i></el-link>
        </el-col>
      </el-row>

      <vxe-table
        border
        show-header-overflow
        show-overflow
        ref="OperationTable"
        highlight-hover-row
        :align="allAlign"
        :edit-config="{trigger: 'click', mode: 'row',icon: 'fa fa-pencil'}"
        :data="eOptionVOList">
        <vxe-table-column field="operId" title="id" :edit-render="{name: 'input'}"></vxe-table-column>
        <vxe-table-column field="operName" title="名称" :edit-render="{name: 'input'}"></vxe-table-column>
        <vxe-table-column field="operScript" title="事件(脚本动作)" :edit-render="{name: 'input'}"></vxe-table-column>
        <vxe-table-column title="操作" width="100" show-overflow>
          <template v-slot="{ row }">
            <i class="el-icon-delete"  @click="operationremoveEvent(row)"></i>
          </template>
        </vxe-table-column>
      </vxe-table>

    </div>
    <div class="content-child2">
      <img :src="eEquipmentypeVO.equipmentPic"  style="width: 100%;margin: 20px 10px;"/>
     <div style="margin-top: 100px;display: flex;justify-content: flex-end;">
        <el-button @click="cancel">取 消</el-button>&emsp;
        <el-button type="primary" @click="submitData">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import EquipType from '@/api/equipType'
  export default{
    props:{
      TypeInfo:Object,
      OperatsList:Array,
      SensorList:Array
    },
    data(){
      return{
        SensorListOption: [{
          value: '1',
          label: '压力传感器'
        }, {
          value: '2',
          label: '温度传感器'
        }, {
          value: '3',
          label: '流量传感器'
        }],
       // 接口API地址
       BASE_API: process.env.BASE_API,
        input:'',
        addForm:[],
        addForm1:{
          date: '',
          name: '',
          address: ''
        },
        allAlign: "center",
        // 设备类型
        eEquipmentypeVO:{
          // 频率
          acquisitionFrequency:'',
          // 设备型号
          equipmentId:'',
          // 设备名称
          equipmentName:'',
          // 图片
          equipmentPic:'',
          // 描述
          description:'',

          // 脚本
          script:''
        },
        // 传感器List
        eSensorVOList:[],
        // 操作按钮
        eOptionVOList:[],
        // 存储old equipmentId 防止客户修改id 后后端没有标识
        oldEquipmentId:""
      }
    },
    methods:{
      // 操作按钮添加新的一行
       addOperationType(row){
        this.$refs.OperationTable.insertAt(row)
      },
      // 传感器添加新的一行
      addSensorType(row){
        this.$refs.sensorTable.insertAt(row)
      },
      // 操作删除
      operationremoveEvent (row) {
        this.$refs.OperationTable.remove(row)
      },
      // 传感器删除
      sensormoveEvent (row) {
        this.$refs.sensorTable.remove(row)
      },

      // 经过一系列操作后最终的数据
      getOperatLastData(){
        // 获取操作table的删除的数据
        var OperationdeleteInfo = this.$refs.OperationTable.getRemoveRecords()
        this.eOptionVOList.forEach((item1,index1,arr1) => {
          OperationdeleteInfo.forEach((item2,index2,arr2) => {
            if(item1.operId === item2.operId){
              // 从OperatsList 里面删除掉
              this.eOptionVOList.splice(index1,1)
            }
          })
        })

        // 获取操作table的新增数据
        let OperationinsertInfo = this.$refs.OperationTable.getInsertRecords()
        OperationinsertInfo.forEach((item,index,arr) => {
          this.eOptionVOList.push(item)
        })
      },



      getSensorLastData(){
        // 获取操作table的删除的数据
        var sensordeleteInfo = this.$refs.sensorTable.getRemoveRecords()
        this.eSensorVOList.forEach((item1,index1,arr1) => {
          sensordeleteInfo.forEach((item2,index2,arr2) => {
            if(item1.operId === item2.operId){
              // 从OperatsList 里面删除掉
              this.eSensorVOList.splice(index1,1)
            }
          })
        })

        // 获取操作table的新增数据
        let sensorinsertInfo = this.$refs.sensorTable.getInsertRecords()
          sensorinsertInfo.forEach((item,index,arr) => {
            this.eSensorVOList.push(item)
        })
      },


      // 提交数据
      submitData(){
        this.getOperatLastData()
        this.getSensorLastData()
        alert(this.oldEquipmentId)
        EquipType.eEquipmentypeAdd(this.eEquipmentypeVO,this.eSensorVOList,this.eOptionVOList,this.oldEquipmentId).then(res => {
          if(res.data.status === "200"){
            // 第一个false 代表关闭弹窗  第二个代表数据提交成功
            this.$emit("equipEditorVisible",false,true)
          }
        })
      },

      // 图片上传格式要求
      beforeUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isGIF = file.type === 'image/gif';
          const isPNG = file.type === 'image/png';
          const isBMP = file.type === 'image/bmp';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG && !isGIF && !isPNG && !isBMP) {
              this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
          }
          if (!isLt2M) {
              this.$message.error('上传图片大小不能超过 2MB!');
          }
          return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
      },
      //文件上传成功的钩子函数
      handleSuccess(res, file){
          this.$message({
              type: 'success',
              message: '上传成功',
              duration: 1000,
              center: true
          });
          // 将图片绑定
          this.eEquipmentypeVO.equipmentPic = this.BASE_API+file.response.data
      },
      // 取消
      cancel(){
        // 第一个false 代表关闭弹窗  第二个代表数据未提交
        this.$emit("equipEditorVisible",false,false)
      },
    },
    mounted() {
      this.eEquipmentypeVO = this.TypeInfo
      this.eSensorVOList = this.SensorList
      this.eOptionVOList = this.OperatsList
      
      // 第一次加载获取oldequipmentId
      this.oldEquipmentId =this.eEquipmentypeVO.equipmentId
    },
    watch:{
      TypeInfo:function(newValue,oldValue){
        this.eEquipmentypeVO = newValue

        // alert(newValue.equipmentId)
        // 只有不为空才赋值给oldequipment
        if(newValue.equipmentId != ""){
          this.oldEquipmentId = newValue.equipmentId
        }
      },
      SensorList:function(){
        this.eSensorVOList = this.SensorList
      },
      OperatsList:function(){
        this.eOptionVOList = this.OperatsList
      },
      deep: true
    },
  }
</script>

<style scoped="scoped">
  .content{
    display: flex;
  }
  .content-child1{
    flex: 1;
  }
  .content-child2{
    width: 300px;
    /* height: 200px; */
    /* background-color: #000000; */
  }
  .theClass{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
</style>
